<template>
  <div class="api-test-panel">
    <el-card class="test-card">
      <template #header>
        <div class="card-header">
          <h3>API连接测试面板</h3>
          <el-button type="primary" @click="runAllTests" :loading="loading">
            运行所有测试
          </el-button>
        </div>
      </template>
      
      <div class="test-content">
        <div class="test-section">
          <h4>API配置信息</h4>
          <div class="config-info">
            <p><strong>API基础URL:</strong> {{ apiConfig.baseUrl }}</p>
            <p><strong>配置状态:</strong> 
              <el-tag :type="apiConfig.isValid ? 'success' : 'danger'">
                {{ apiConfig.isValid ? '正常' : '错误' }}
              </el-tag>
            </p>
            <p v-if="!apiConfig.isValid" class="error-message">
              {{ apiConfig.message }}
            </p>
          </div>
        </div>
        
        <el-divider />
        
        <div class="test-section">
          <h4>测试结果</h4>
          
          <div class="test-results" v-if="hasRunTests">
            <div class="test-item">
              <span class="test-name">项目API连接:</span>
              <el-tag :type="testResults.project ? 'success' : 'danger'">
                {{ testResults.project ? '成功' : '失败' }}
              </el-tag>
            </div>
            
            <div class="test-item">
              <span class="test-name">任务API连接:</span>
              <el-tag :type="testResults.task ? 'success' : 'danger'">
                {{ testResults.task ? '成功' : '失败' }}
              </el-tag>
            </div>
            
            <div class="test-item">
              <span class="test-name">公告API连接:</span>
              <el-tag :type="testResults.announcement ? 'success' : 'danger'">
                {{ testResults.announcement ? '成功' : '失败' }}
              </el-tag>
            </div>
            
            <div class="test-item overall">
              <span class="test-name">总体状态:</span>
              <el-tag :type="testResults.overall ? 'success' : 'danger'">
                {{ testResults.overall ? '全部通过' : '部分失败' }}
              </el-tag>
            </div>
          </div>
          
          <div class="no-tests" v-else>
            <el-empty description="尚未运行测试" :image-size="80" />
          </div>
        </div>
        
        <el-divider />
        
        <div class="test-section">
          <h4>单项测试</h4>
          
          <div class="individual-tests">
            <el-button 
              type="primary" 
              @click="testProjectApi" 
              :loading="loading"
              :disabled="!apiConfig.isValid"
            >
              测试项目API
            </el-button>
            
            <el-button 
              type="success" 
              @click="testCreateProject" 
              :loading="loading"
              :disabled="!apiConfig.isValid"
            >
              测试创建项目
            </el-button>
          </div>
        </div>
        
        <el-divider />
        
        <div class="test-section">
          <h4>故障排除</h4>
          
          <div class="troubleshooting">
            <p><strong>1. 检查后端服务是否运行</strong></p>
            <p><strong>2. 检查API基础URL配置</strong></p>
            <p><strong>3. 检查网络连接</strong></p>
            <p><strong>4. 检查浏览器控制台错误</strong></p>
            <p><strong>5. 检查后端日志</strong></p>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  testAllApis, 
  testProjectApi as testProject, 
  testCreateProject as testCreate,
  checkApiConfig as checkConfig
} from '@/utils/apiTest'

// Props
interface Props {
  teamId: number
}

const props = defineProps<Props>()

// 响应式数据
const loading = ref(false)
const hasRunTests = ref(false)
const apiConfig = ref({
  baseUrl: '',
  isValid: false,
  message: ''
})
const testResults = ref({
  project: false,
  task: false,
  announcement: false,
  overall: false
})

// 方法
const checkApiConfig = () => {
  apiConfig.value = checkConfig()
}

const runAllTests = async () => {
  if (!props.teamId) {
    ElMessage.warning('请先选择团队')
    return
  }
  
  try {
    loading.value = true
    testResults.value = await testAllApis(props.teamId)
    hasRunTests.value = true
  } catch (error: any) {
    console.error('测试执行失败:', error)
    ElMessage.error(`测试执行失败: ${error.message}`)
  } finally {
    loading.value = false
  }
}

const testProjectApi = async () => {
  if (!props.teamId) {
    ElMessage.warning('请先选择团队')
    return
  }
  
  try {
    loading.value = true
    testResults.value.project = await testProject(props.teamId)
    hasRunTests.value = true
  } catch (error: any) {
    console.error('项目API测试失败:', error)
    ElMessage.error(`项目API测试失败: ${error.message}`)
  } finally {
    loading.value = false
  }
}

const testCreateProject = async () => {
  if (!props.teamId) {
    ElMessage.warning('请先选择团队')
    return
  }
  
  try {
    loading.value = true
    await testCreate(4)
  } catch (error: any) {
    console.error('创建项目测试失败:', error)
    ElMessage.error(`创建项目测试失败: ${error.message}`)
  } finally {
    loading.value = false
  }
}

// 生命周期
onMounted(() => {
  checkApiConfig()
})
</script>

<style scoped lang="scss">
.api-test-panel {
  .test-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }
    }
    
    .test-content {
      .test-section {
        margin-bottom: 16px;
        
        h4 {
          margin: 0 0 16px 0;
          font-size: 16px;
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
        
        .config-info {
          p {
            margin: 8px 0;
            
            &.error-message {
              color: var(--el-color-danger);
            }
          }
        }
        
        .test-results {
          .test-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding: 8px 16px;
            background-color: var(--el-bg-color-page);
            border-radius: 4px;
            
            &.overall {
              margin-top: 16px;
              background-color: var(--el-color-info-light-9);
              font-weight: 600;
            }
            
            .test-name {
              font-weight: 500;
            }
          }
        }
        
        .individual-tests {
          display: flex;
          gap: 16px;
          margin-top: 16px;
        }
        
        .troubleshooting {
          p {
            margin: 8px 0;
          }
        }
      }
    }
  }
}
</style>
